<template>
	<view class="exam_matter">
		<view style="height: 25px; width: 750rpx;  background-color:transparent;"></view>
		<my-title :handles="handles" :title="title" :iSshow="isShow" @clickEvent="tipsHandle" @back="back"></my-title>
		<text class="uni-countdown">{{countDown}}</text>
		<test 
			ref="test"
			:testData="exercisesData"
			@select-data="selectData" 
			@submitTest="open"
			:title="title"
			:activeNum="activeNum"
			>
		</test>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog title="" content="确定要提交么?" :before-close="true" @close="close" @confirm="confirm">
			</uni-popup-dialog>
		</uni-popup>
		<!-- 点击右上角提山弹出的对话框 -->
		<uni-popup ref="tip" type="dialog">
			<view class="dialog">
				<view class="content">
					<button 
						v-for="(item, index) in exercisesData" 
						:key="index" 
						size="mini"
						@click="toEvent(item.id)"
						:class="[answerIds.includes(item.id) ? 'btn-active' : '']"
					>
						{{index + 1}}
					</button>
				</view>

				<view class="buttonGroup">
					<button class="left" @click="close2">取消</button>
					<button class="right" @click="confirm2">提交</button>
				</view>
			</view>

		</uni-popup>
	</view>

</template>

<script>
	import myTitle from '../../../components/title.vue'
	import test from '../../../components/test.vue'
	export default {
		data() {
			return {
				activeNum: 1,
				handles: '',
				isShow: true,
				tid: '',
				token: '',
				countDown: null,
				title: '倒计时',
				exercisesData: [],
				answerData: [],
				answerIds: [],
				reverseData: []
			}
		},
		props: {},
		components: {
			myTitle,
			test
		},
		methods: {
			getIndex(id) {
				return this.exercisesData.findIndex(i => i.id == id)
			},
			toEvent(id) {
				this.activeNum = parseInt(this.getIndex(id)) + 1
				this.$refs.test.tipsFlag = false
				this.$refs.test.activeNum = this.activeNum
				this.$refs.test.isA = null
				var item = this.$refs.test.testData[this.$refs.test.activeNum - 1]
				console.log(this.$refs.test.activeNum)
				if (item.type === '判断题') {
					this.$refs.test.select = uni.getStorageSync('selectData')
					// console.log(this.select)
					this.$refs.test.bianli(this.$refs.test.select, item.id)
				}
				if (item.type === '单选题') {
					this.$refs.test.onlySelect = uni.getStorageSync('onlySelectData')
					this.$refs.test.bianli(this.$refs.test.onlySelect, item.id)
				}
				this.$refs.tip.close()
			},
			back() {
				if (this.title === '章节练习') {
					uni.removeStorageSync('selectData')
					uni.navigateTo({
						url: '/pages/practice/practice'
					})
				} else {
					uni.navigateTo({
						url: '/pages/examnation/submitExam'
					})
				}

			},

			open() {
				// let selectData = uni.getStorageSync('selectData') || []
				// let onlySelectData = uni.getStorageSync('onlySelectData') || []
				// this.answerData = selectData.concat(onlySelectData)
				this.$refs.popup.open()
			},


			close() {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},
			/**
			 * 点击确认按钮触发
			 * @param {Object} done
			 * @param {Object} value
			 */
			confirm(value) {
				// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
				// ...
				if (this.title === '章节练习') {
					console.log(this.answerData)
					uni.request({
						url: 'http://exam.tutestudio.net/api/student/submitExercise',
						method: 'POST',
						data: this.answerData,
						header: {
							token: this.token
						},
						success: (res) => {
							if (res.data.statusCode !== 200) {
								uni.showToast({
									title: res.data.errors,
									icon: 'none'
								})
								return;
							}
							uni.removeStorageSync('selectData')
							uni.removeStorageSync('onlySelectData')
							console.log(res.data)
							uni.showToast({
								title: res.data.errors,
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/index/index'
								})
							}, 1000)
						},
						fail(err) {
							uni.showToast({
								title: '接口参数有误！',
								icon: 'none'
							})
						}
					})
				} else {
					uni.request({
						url: 'http://exam.tutestudio.net/api/student/submitPaper',
						method: 'POST',
						data: {
							examId: this.tid,
							items: this.answerData
						},
						header: {
							token: this.token
						},
						success: (res) => {
							console.log(res.data)
							if (res.data.statusCode !== 200) {
								uni.showToast({
									title: res.data.errors,
									icon: 'none'
								})
								return;
							}
							uni.removeStorageSync('endTime')
							uni.removeStorageSync('selectData')
							uni.removeStorageSync('onlySelectData')
							uni.showToast({
								title: res.data.errors,
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/index/index'
								})
							}, 1000)
						},
						fail(err) {
							uni.showToast({
								title: '接口参数有误！',
								icon: 'none'
							})
						}
					})
				}
				this.$refs.popup.close()
			},
			close2() {
				this.$refs.tip.close()
			},

			confirm2(value) {
				this.confirm()
				this.$refs.tip.close()
			},
			tipsHandle() {
					let selectData = uni.getStorageSync('selectData') || []
					let onlySelectData = uni.getStorageSync('onlySelectData') || []
					this.answerData = selectData.concat(onlySelectData)
					this.answerData.forEach((ele, index) => {
						this.answerIds.push(ele.questionId)
					})
					this.answerIds = this.dedupe(this.answerIds)
					this.$refs.tip.open()
			},
			dedupe(arr) {
				return Array.from(new Set(arr))
			},
			selectData(item) {},
			getCountDown(time) {
				var nowTime = +new Date(); // 当前毫秒数
				var targetTime = +new Date(time); // 目标毫秒数 用户输入的目标倒计时
				var lastTime = (targetTime - nowTime) / 1000; // 倒计时毫秒数 将毫秒转换为秒数
				var minute = parseInt(lastTime / 60 % 60);
				var second = parseInt(lastTime % 60);
				minute = minute < 10 ? '0' + minute : minute;
				second = second < 10 ? '0' + second : second;
				return minute + '分' + second + '秒';
			},
			getPaperQuertion() {
				uni.request({
					url: 'http://exam.tutestudio.net/api/student/paperQuestion?id=' + this.tid,
					method: 'GET',
					header: {
						token: this.token
					},
					success: (res) => {
						if (res.data.statusCode !== 200) {
							uni.showToast({
								title: res.data.errors,
								icon: 'none'
							})
							return;
						}
						console.log(res.data)
						this.exercisesData = res.data.data
						console.log(this.exercisesData)
					},
					fail(err) {
						uni.showToast({
							title: '接口参数有误！',
							icon: 'none'
						})
					}
				})
			}
		},
		onLoad(option) {
			this.token = uni.getStorageSync('token')
			this.handles = '../../../static/icon/exams.png'
			if (!this.token) {
				uni.navigateTo({
					url: '../loginpage/loginpage'
				})
				return;
			}
			if (option.id) {
				this.tid = option.id
				console.log('考试')
				this.getPaperQuertion()
			} else {
				this.exercisesData = JSON.parse(uni.getStorageSync('exercises'))
				if (!this.exercisesData) {
					uni.navigateTo({
						url: '../loginpage/loginpage'
					})
					return;
				}
				this.title = '章节练习'
				console.log(this.exercisesData)
			}
		},
		created() {
			if (this.title !== '章节练习') {
				const end = uni.getStorageSync('endTime')
				this.countDown = this.getCountDown(end)
				var time = setInterval(() => {
					this.countDown = this.getCountDown(end)
				}, 1000);
				if (this.countDown.length > 6) {
					uni.request({
						url: 'http://exam.tutestudio.net/api/student/submitPaper',
						method: 'POST',
						data: {
							examId: this.tid,
							items: this.answerData
						},
						header: {
							token: this.token
						},
						success: (res) => {
							console.log(res.data)
							if (res.data.statusCode !== 200) {
								uni.showToast({
									title: res.data.errors,
									icon: 'none'
								})
								return;
							}
							uni.removeStorageSync('endTime')
							uni.removeStorageSync('selectData')
							uni.removeStorageSync('onlySelectData')
							uni.showToast({
								title: res.data.errors,
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/index/index'
								})
							}, 1000)
						},
						fail(err) {
							uni.showToast({
								title: '接口参数有误！',
								icon: 'none'
							})
						}
					})
					clearInterval(time)
				}
			}
		}
	}
</script>

<style lang="scss">
	.exam_matter {
		width: 750rpx;
		height: 100vh;
	}

	.uni-countdown {
		display: inline-block;
		width: 80px;
		text-align: center;
		top: -8px;
		position: relative;
		left: 50%;
		background-color: #3C86FD;
		color: #FFFFFF;
		border-radius: 15px;
		transform: translateX(-50%);
	}

	.dialog {
		width: 300px;
		border-radius: 10px;
		overflow: hidden;
		background-color: #fff;

		.content {
			margin: 10px 0 50px 12px;
			button {
				width: 50px;
				margin-left: 4px;
				color: #ccc
			}
			.btn-active {
				color: #fff;
				background-color: #3C86FD;
			}
		}

		.buttonGroup {
			position: absolute;
			bottom: 0;
			width: 300px;
			height: 46px;

			button {
				height: 46px;
				float: left;
				width: 150px;
				border-radius: 0px;
				color: white;
				font-size: 16px;
			}

			.left {
				background-color: #9ecbfb;

			}

			.right {
				background-color: #007afc;
			}
		}
	}
</style>
